<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>学校名称：{{name}}</h1>
    <h1>学校地址：{{address}}</h1>
</div>
<script src="../JavaScript/vue.js"></script>
<script>
    /*
    * Vue中的数据代理：
    *   通过vm对象来代理data对象中属性的操作(读/写)
    * Vue中数据代理的好处：
    *   更加方便操作data中的数据
    * 基本原理
    *   通过Object.defineProperty()把data中的所有属性添加到vm身上
    *   为每一个添加到vm上的属性匹配一个get/set
    *   在get/set内部去操作(读/写)data中对应的属性
    * */
    let data = {
        name: "尚硅谷",
        address: "衡阳"
    }
    const vm = new Vue({
        el: "#app",
        data
    })
    console.log(vm.name) // get函数工作
    vm.name = "黑马程序员"  // set函数工作
    console.log(vm._data === data) //true
    console.log(vm.$data === data)//true
    console.log(vm.$data === vm._data)//true
</script>
</body>
</html>
